<template>
	<div>
		<basicContainer>
			<vProForm
				:inline="false"
				:data="searchData"
				label-position="right"
				label-width="90px"
				:items="searchCfg"
				:formAction="searchAction"
			>
				<template #custom>
					<div style="color: red">自定义模版插槽</div>
				</template>
			</vProForm>
		</basicContainer>
	</div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import vProForm from '../components/vpro-materials/vpro-form/index.js'
import basicContainer from '../components/vpro-materials/basic-container/index.js'


let searchData = reactive({
	input: '',
	inputNumber: '',
	inputPassword: '',
	textarea: '',
	acceptType: '0',
	select: '0',
	radioMap: 1,
	timeSelect: '1',
	checkboxKey: ['0'],
	timePickerTime: '',
	datetimerangeTime: '',
	startTime: '',
	endTime: '',
	coverImages: [],
	text: '纯文本内容',
})
let searchCfg = [
	{
		type: 'customLabel',
		dataIndex: 'afterSalesSn',
		customLabel: '<div>插入HTML代码</div>',
	},
	{
		type: 'input',
		title: '文本输入',
		dataIndex: 'input',
	},
	{
		type: 'inputNumber',
		title: '数字',
		dataIndex: 'inputNumber',
	},
	{
		type: 'inputPassword',
		title: '密码',
		dataIndex: 'inputPassword',
	},
	{
		type: 'textarea',
		title: '文本域',
		dataIndex: 'textarea',
	},
	{
		type: 'select',
		title: '下拉选择',
		dataIndex: 'select',
		placeholder: '请选择',
		label: 'value',
		options: [
			{
				select: '0',
				value: '全部',
			},
			{
				select: '1',
				value: '选项1',
			},
			{
				select: '2',
				value: '选项2',
			},
			{
				select: '3',
				value: '选项3',
			},
		],
	},
	{
		type: 'radioMap',
		dataIndex: 'radioMap',
		title: '单选',
		options: {
			'单选1': 1,
			'单选2': 2,
		},
	},
	{
		type: 'radioButton',
		title: '时间单选',
		dataIndex: 'timeSelect',
		label: 'value',
		options: [
			{
				timeSelect: 1,
				value: '7天',
			},
			{
				timeSelect: 2,
				value: '14天',
			},
		],
	},
	{
		type: 'checkbox',
		dataIndex: 'checkboxKey',
		label: 'value',
		title: '多选',
		options: [
			{
				checkboxKey: '0',
				value: '多选',
			},
			{
				checkboxKey: '1',
				value: '多选1',
			},
			{
				checkboxKey: '2',
				value: '多选2',
			},
		],
	},
	{
		title: '时间',
		type: 'time',
		timeAttributes: {
			type: 'timeSelect',
		},
		dataIndex: 'returnTime',
	},
	{
		title: '日期时间',
		type: 'time',
		timeAttributes: {
			type: 'timePicker',
		},
		dataIndex: 'timePickerTime',
	},
	{
		title: '时间区间',
		type: 'time',
		timeAttributes: {
			type: 'datetimerange',
		},
		dataIndex: 'datetimerangeTime',
	},
	{
		type: 'datetimerange',
		title: '日期时间区间',
		dataIndex: {
			startTime: 'startTime',
			endTime: 'endTime',
		},
		placeholder: ['请选择开始时间', '请选择结束时间'],
	},
	{
		type: 'upload',
		title: '文件上传',
		dataIndex: 'organizationFile',
		uploadAttributes: {
			accept: '',
			httpRequest: file => {
				console.log(file)
			},
		},
	},
	{
		type: 'uploadImage',
		dataIndex: 'coverImages',
		title: '图片上传',
		uploadAttributes: {
			limit: 1,
			imageName: 'imageUrl',
			accept: 'image/jpeg, image/jpg, image/png',
			httpRequest: file => {
				console.log(file)
			},
		},
	},
	{
		type: 'custom',
		title: '自定义',
		dataIndex: 'custom',
	},
	{
		type: 'text',
		title: '纯文本',
		dataIndex: 'text',
	},
]
let searchAction = [
	{
		title: '重置',
		auth: '',
		isClear: true,
	},
	{
		title: '提交',
		type: 'primary',
		click: e => {
			console.log({ ...searchData })
		},
	},
]
</script>
